<!-- 起草合同 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew title="合同变更" showBack> </pageHeaderNew>
    </template>
    <div class="cantainer">
      <a-steps :current="current" style="width: 700px; margin-bottom: 20px">
        <!-- <a-step>合同信息</a-step> -->
        <a-step>合同变更原因</a-step>
        <a-step>合同编辑</a-step>
        <a-step>合同预览</a-step>
      </a-steps>
      <!-- 基础信息 -->
      <!-- <div v-show="current === 1">
      <ContractBaseInfo ref="baseInfoRef" v-model:data="templateData.data" />
    </div> -->
      <!-- 合同原因 -->
      <div v-show="current === 1">
        <a-form
          :model="formData"
          style="width: 700px; margin-top: 30px"
          ref="refForm"
          :rules="{
            way: [
              {
                required: true,
                message: '请选择'
              }
            ],
            overTime: [
              {
                required: true,
                message: '请选择'
              }
            ],
            expire: [
              {
                required: true,
                message: '请选择'
              }
            ],
            signature: [
              {
                required: true,
                message: '请选择'
              }
            ],
            remind: [
              {
                required: true,
                message: '请选择'
              }
            ]
          }"
          auto-label-width
        >
          <a-form-item label="变更原因" show-colon>
            <!-- <a-cascader
            :options="reasonOptions"
            :field-names="fieldNames"
            :style="{ width: '200px' }"
            placeholder="请选择"
          /> -->
            <a-select :style="{ width: '200px' }">
              <a-option
                v-for="item in reasonOptions"
                :key="item.id"
                :label="item.text"
              />
            </a-select>
          </a-form-item>
          <a-form-item label="变更内容描述" field="remark" show-colon>
            <a-textarea
              v-model="formData.remark"
              show-word-limit
              :max-length="300"
              allow-clear
              :auto-size="{
                minRows: 3
              }"
            ></a-textarea>
          </a-form-item>
          <a-form-item
            label="签署有效期"
            :content-flex="false"
            :merge-props="false"
            show-colon
          >
            <a-space>
              <a-form-item label="" field="remind" hide-label>
                <a-date-picker style="width: 200px" />
              </a-form-item>
              <a-form-item label="" field="remind" hide-label>
                签署有效期前
                <a-input-number
                  v-model="formData.remind"
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                >
                  <template #append>
                    <span>天</span>
                  </template>
                </a-input-number>
                进行提醒
              </a-form-item>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
      <Step2 ref="refStep2" v-show="current === 2" />
      <!-- <ContractDesign ref="designRef" v-model:data="templateData.data" /> -->
      <!-- 合同预览 -->

      <Step3
        ref="refStep3"
        :oldTemplateList="oldFormData.children || []"
        :newTemplateList="formData.children || []"
        :userId="formData.userId"
        v-show="current === 3"
      />
    </div>
    <footer>
      <a-space>
        <a-button type="secondary" v-if="current > 1" @click="onPrev">
          <IconLeft />
          上一步
        </a-button>
        <a-button type="primary" v-if="current < 3" @click="onNext">
          下一步
          <IconRight />
        </a-button>
        <a-button type="outline" v-show="current === 3" @click="save">
          确认并保存
        </a-button>
      </a-space>
    </footer>
  </ContentCard>
</template>

<script setup lang="ts">
import Step2 from './components/step2.vue';
import Step3 from './components/Step3.vue';
import { GetContractStatusType } from '@/apis/management/contract/baseSetting';
import {
  DraftWaitSignedContractSavePutStatus,
  GetUserContractByStatusDetail
} from '@/apis/management/contract/contractManagement/waitSigned';
import { ChangeContract } from '@/apis/management/contract/contractManagement/haveSigned';
import router from '@/router';
const route = useRoute();

let oldFormData = reactive<any>({});
let formData = reactive<any>({});
const current = ref(1);
let refStep2 = ref();
let refStep3 = ref();
const onPrev = () => {
  current.value--;
};
const onNext = async () => {
  if (current.value == 2) {
    formData.children = refStep2.value.getData();
    refStep3.value.loadText();
  }
  current.value++;
};

// 确认并保存
const save = async () => {
  await Promise.all([
    ChangeContract(formData),
    DraftWaitSignedContractSavePutStatus({
      ids: [formData.userId],
      status: 3
    })
  ]);
  router.back();
};
const reasonOptions = ref<any[]>([]);
let initializeData = async () => {
  let [reason, contractList] = await Promise.all([
    GetContractStatusType({
      type: 1
    }),
    GetUserContractByStatusDetail({
      userId: Number(route.query.userId),
      status: 6
    })
  ]);
  reasonOptions.value = reason;
  Object.assign(formData, filterId(contractList[0]));
  Object.assign(oldFormData, contractList[0]);
  refStep2.value.setData(formData.children);
};
//过滤id
let filterId = (data: any) => {
  if (typeof data != 'object' || data == null) return data;
  let runData: any = Array.isArray(data) ? [] : {};
  for (const key in data) {
    if (key !== 'id') runData[key] = filterId(data[key]);
  }
  return runData;
};
initializeData();
</script>

<style lang="less" scoped>
.cantainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer {
  height: 50px;
  padding-top: 15px;
  width: calc(100% - 220px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 220px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
}
</style>
